<template>
  <div class="common-layout">
    <el-container>
      <el-aside :style="elAsideStyle">
        <el-menu
          background-color="#b0bed9"
          text-color="#000"
          active-text-color="#fcfcfc"
          :default-active="editableTabsValue"
        >
          <el-sub-menu
            :index="item.model_fk.toString()"
            v-for="item in store.state.admin.funList"
            :key="item.model_fk"
          >
            <template #title>
              <el-icon>
                <setting v-if="item.model_fk == 1" />
                <briefcase v-if="item.model_fk == 4" />
              </el-icon>
              <span>{{ item.model_name }}</span>
            </template>
            <template v-for="item2 in item.funs">
              <el-menu-item
                :index="item2.page_url"
                v-if="item2.type == 2"
                :key="item2.t_fun_pk"
                @click="handleItemClick(item2)"
                >{{ item2.fun_name }}</el-menu-item
              >
            </template>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="el-icon" @click="elMenuShow = !elMenuShow">
            <Fold v-if="elMenuShow" />
            <Expand v-else />
          </div>
          <el-tabs
            v-model="editableTabsValue"
            type="card"
            closable
            @tab-remove="removeTab"
          >
            <el-tab-pane
              v-for="item in editableTabs"
              :key="item.name"
              :label="item.fun_name"
              :name="item.path"
            >
            </el-tab-pane>
          </el-tabs>
          <div class="div-hello">
            <span>你好，{{ store.state.admin.admin_name }}</span>
            <router-link to="/" target="_blank">去往前台</router-link>
            <el-button type="danger" size="small" @click="handleLogout"
              >退出</el-button
            >
            <el-button type="warning" size="small" @click="handleClear"
              >清空缓存</el-button
            >
          </div>
        </el-header>
        <el-main>
          <router-view v-slot="{ Component }">
            <keep-alive>
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script setup lang="ts">
import { ref, reactive, onActivated, watch, computed } from "vue";
import { clearAll } from "@/util/request/localcache";

import {
  Briefcase,
  Setting,
  School,
  Expand,
  Fold,
} from "@element-plus/icons-vue";

import ajax from "@/util/request";

import { ElMessageBox } from "element-plus";

import { useRouter } from "vue-router";

import { useStore } from "vuex";

// let route = useRoute();
const editableTabsValue = ref("");

const router = useRouter();
const store = useStore();

const elMenuShow = ref(true);

const elAsideStyle = computed(() => {
  if (elMenuShow.value) {
    return {
      width: '200px'
    }
  } else {
    return {
      width: '0px'
    }
  }
})

// title/name
const editableTabs = reactive(new Array<any>());

// 退出系统
function handleLogout() {
  ElMessageBox.confirm("请确认是否退出，并返回到登陆页面。", "退出提示", {
    confirmButtonText: "退出",
    cancelButtonText: "取消",
    type: "info",
  }).then(() => {
    editableTabs.length = 0;
    ajax("/login/logout");
    store.commit("setAdmin", {});
    router.push("/adm");
  });
}

// 点击菜单项目
function handleItemClick(item: any) {
  editableTabsValue.value = item.path;
  // 如果不存在则添加
  if (!editableTabs.some((v) => v.path == item.path)) {
    editableTabs.push(item);
  }
}

// 移除标签页
function removeTab(name: string): void {
  const index = editableTabs.findIndex((v) => v.path == name);
  if (index == -1) {
    return;
  }
  // 不在第一位
  if (index != 0) {
    editableTabsValue.value = editableTabs[index - 1].path;
    // 是在第一位
  } else {
    // 目前还有至少两个选项卡时，显示后面的数据
    if (editableTabs.length >= 2) {
      editableTabsValue.value = editableTabs[1].path;
    }
  }
  // 删除掉
  editableTabs.splice(index, 1);
  // 如果全部被删除完毕，那么跳转到欢迎页面
  if (editableTabs.length == 0) {
    editableTabsValue.value = "";
  }
}

function handleClear() {
  clearAll();
}

watch(editableTabsValue, (newVal) => {
  router.push("/adm-index/" + newVal.split("/")[0]);
});

onActivated(() => {
  // 重置选项卡的值
  if (editableTabsValue.value != "") {
    editableTabsValue.value = "";
  }
});

document.title="我的个人主页-管理端";

</script>

<style scoped lang="scss">
.el-aside {
  transition: all .5s;
  width: 200px;
  overflow: hidden;

  .el-menu {
    height: 100vh;
  }
}


.div-hello {
  position: absolute;
  right: 20px;
  top: 8px;
  font-size: 12px;
  display: flex;
  align-items: center;

  & > a {
    color: var(--base-color);
  }

  & > * {
    margin-left: 10px;
  }
}

.el-header {
  display: flex;
  height: 40px;
  margin-bottom: 0px;

  & > .el-icon {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    background-color: var(--el-color-primary);
    color: #fff;
    cursor: pointer;
  }

  & > .el-tabs {
    flex-grow: 1;
  }
}

.el-main {
  padding-top: 0px;
}
</style>